<template>
	<view class="coupon-box1">
		<view class="coupon-box-item">
			<view class="coupon-head" id="couponHead">
				<image src="../static/img/coupon-top.png" mode="widthFix" @load="success()"></image>
				<view class="coupon-title text-white text-blod  text-center text-xl text-cut"
					:style="{lineHeight:coupon.height*0.4+'px', width:coupon.width*0.90+'px',bottom:coupon.top+'px',height:coupon.height*0.4+'px',left:coupon.width*0.05+'px'}">
					<text>{{title}}</text></view>
			</view>

			<view class="coupon-body" :style="{width:coupon.width*0.90+'px',marginTop:-coupon.top+'px'}"
				v-if=" coupon.width!=0 ">
				<scroll-view scroll-y="true" class="coupon-body-box">
					<view class="coupon-body-item" v-for="(item,index) in list" :key="index" >
						<view class="c-b-left">
							<view class="c-b-round">

							</view>
						</view>
						<view class="c-b-box" :style="{width:coupon.width*0.92*0.94-30+'px'}">
							<view class="c-b-box-item ">
								<view class="price-box  middle">{{prinint(item.coupon.money)}}</view>
								<view class="c-b-box-title">{{item.coupon.title}}</view>

							</view>
							<view class="c-b-box-item">
								<view class="price-box1  middle">满{{prinint(item.coupon.condition)}}可用</view>
								<text
									class="c-b-box-title1">{{plice(item.coupon.send_start_time)}}至{{plice(item.coupon.send_end_time)}}</text>
							</view>
						</view>
						<view class="c-b-right">
							<view class="c-b-round-r">

							</view>
						</view>
					</view>
					
					
				</scroll-view>
				<view class="coupon-bottom">
					<view class="coupon-button middle" @click="getCoupon">
						立即收下
					</view>
					<view class="coupon-button-text">
						您可以在“个人中心-红包卡券”查看您的优惠券
					</view>

				</view>
			</view>
		</view>
		<view class="coupon-box-close" @click="closeSpec">
			<text class="cuIcon-close text-whtie text-blod"></text>
		</view>
	</view>
</template>
<script>
	export default {
		name: "Coupon",
		props: {
			couponData: {
				type: Object,
				default: null,
			}

		},
		data() {
			return {
				coupon: {
					width: 0,
					top: 0,
					isShow: false,
					height: 0
				},
				list: [],
				activity_id: -1,
				title:""


			}
		},
		watch: {
			couponData(val) {
				this.$nextTick(() => {
					this.activity_id = val.coupon_activity.activity_id;
					this.list = val.coupon_activity.bindcoupon;
					this.title= val.coupon_activity.title;
				})

			}
		},
		mounted() {
			if (typeof this.couponData.coupon_activity != 'undefined') {
				this.$nextTick(() => {
					this.activity_id = this.couponData.coupon_activity.activity_id;
					this.list = this.couponData.coupon_activity.bindcoupon;
					this.title= this.couponData.coupon_activity.title;
				
				})
				this.$forceUpdate(this.couponData);
			}
		},
		methods: {
			plice(time) {
				let tim = time.split(" ");
				return tim[0];
			},
			prinint(val) {
				return parseInt(val);
			},
			success() {
				uni.hideLoading();
				let query = uni.createSelectorQuery().in(this);
				query.select("#couponHead").boundingClientRect(data => {
					if (typeof this.couponData.coupon_activity != 'undefined') {
						this.coupon.isShow = true;
					}
					this.coupon.width = data.width;
					this.coupon.height = data.height;
					this.coupon.top = data.height * 0.1455;


				}).exec();

				let isset = this.couponData.coupon_activity.hasOwnProperty("bindcoupon");
				if (isset) {

					this.coupon.isShow = true;
				} else {
					this.closeSpec();
				}


			},
			closeSpec() {
				this.$emit("closeNewCoupon");
			},
			getCoupon() {
				this.apiRequest('/buyer/GetAllCoupon', {
					activity_id: this.activity_id,
				}, 0, 'POST').then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if (res.code == 200) {
						this.$emit("closeNewCoupon");
					}
				});
			}

		}






	}
</script>
<style scoped>
	view {
		line-height: 1.5;
	}

	.middle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coupon-title {
		position: absolute;


	}
</style>
<style lang="scss" scoped>
	view {
		line-height: 1.2;
	}

	.cuIcon-close {
		font-size: 60rpx;
	}

	$backgrondColor:linear-gradient(to bottom right, #FC6C50, #FC7155);

	.coupon-box1 {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background-color: rgba(000, 000, 000, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

	.coupon-box-item {
		min-width: 40%;
		max-width: 96%;
		min-height: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.coupon-head {
		max-width: 100%;
		position: relative;

	}

	.coupon-head image {
		max-width: 100%;
		display: block;
	}

	.coupon-body {
		margin-top: -3rpx;
		padding-top: 45rpx;
		min-width: 50%;
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		min-height: 200upx;
		background-image: $backgrondColor;
	}

	.coupon-body-box {
		width: 100%;

		max-height: 400rpx;
		min-height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.coupon-body-item {
		width: 94%;
		height: 150rpx;
		margin: auto;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 15rpx;
		line-height: 1;
	}

	.c-b-left,
	.c-b-right {
		height: 100%;
		display: flex;
		align-items: center;
		width: 30upx;
	}

	.c-b-right {
		flex-direction: row-reverse;
	}

	.c-b-round {
		width: 20rpx;
		height: 40rpx;
		border-radius: 0rpx 40rpx 40rpx 0rpx;
		background-image: $backgrondColor;
	}

	.c-b-round-r {
		width: 20rpx;
		height: 40rpx;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		background-image: $backgrondColor;
	}

	.c-b-box {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.c-b-box-item {
		width: 96%;
		padding: 5upx;
		flex-direction: row;
		display: flex;
		align-items: center;
		line-height: 1;

	}

	.price-box {
		width: 30%;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #DF3636;
	}

	.c-b-box-title {
		width: 70%;
		display: block;
		align-items: center;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;

	}

	.c-b-box-title1 {
		width: 68%;
		display: flex;
		align-items: center;
		font-size: 20upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.price-box1 {
		width: 30%;
		font-size: 20upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}


	.coupon-box-close {
		width: 100%;
		font-size: 80upx;
		color: white;
		text-align: center;
		margin-top: 50upx;
		font-weight: 200;

	}

	.coupon-bottom {
		width: 100%;
		height: 180rpx;
		margin-top: 20upx;

	}

	.coupon-button {
		width: 70%;
		height: 80upx;
		margin: auto;
		background: #FDF16A;
		box-shadow: 1upx 11upx 8upx 0px rgba(0, 0, 0, 0.28), 0px 3upx 6upx 0px rgba(252, 236, 216, 0.5);
		border-radius: 20upx;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #693E00;
	}

	.coupon-button-text {
		padding-top: 40upx;
		margin: auto;
		width: 94%;
		text-align: center;
		font-size: 22upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
